import useWebSocket from '@/utils/WebSocket';
import { LaptopOutlined, UserOutlined } from '@ant-design/icons';
import { MenuProps, Modal } from 'antd';
import { Layout, Menu } from 'antd';
import React, { useMemo } from 'react';
import { useHistory } from 'umi';
import './index.less';
import LogoSvg from './logo.svg';

const { Header, Content, Sider } = Layout;

const route = [
  {
    route: '/recommendRestaurants',
    title: '推荐餐厅',
    icon: LaptopOutlined,
    roles: ['0'],
  },
  {
    route: '/restaurant',
    title: '店铺选择',
    icon: UserOutlined,
    roles: ['0', '1'],
  },
  {
    route: '/dish',
    title: '菜品管理',
    icon: UserOutlined,
    roles: ['1'],
  },
  {
    route: '/merchant',
    title: '店铺管理',
    icon: UserOutlined,
    roles: ['1'],
  },
  {
    route: '/userDish',
    title: '菜品选择',
    icon: LaptopOutlined,
    roles: ['0'],
  },
  {
    route: '/shoppingCart',
    title: '购物车',
    icon: LaptopOutlined,
    roles: ['0'],
  },
  {
    route: '/userOrder',
    title: '订单管理',
    icon: LaptopOutlined,
    roles: ['0'],
  },
  {
    route: '/seat',
    title: '座位管理',
    icon: LaptopOutlined,
    roles: ['1'],
  },
  {
    route: '/merchantOrder',
    title: '订单管理',
    icon: LaptopOutlined,
    roles: ['1'],
  },
  {
    route: '/user',
    title: '个人中心',
    icon: LaptopOutlined,
    roles: ['0'],
  },
  {
    route: '/createRestaurant',
    title: '创建店铺',
    icon: LaptopOutlined,
    roles: ['3'],
  },
  {
    route: '/userManagement',
    title: '用户管理',
    icon: LaptopOutlined,
    roles: ['3'],
  },
  {
    route: '/coupon',
    title: '优惠券管理',
    icon: LaptopOutlined,
    roles: ['1'],
  },
  {
    route: '/userCoupon',
    title: '我的优惠券',
    icon: LaptopOutlined,
    roles: ['0'],
  },
  {
    route: '/complaint',
    title: '投诉管理',
    icon: LaptopOutlined,
    roles: ['3'],
  },
];
const role = localStorage.role;
const items2: MenuProps['items'] = route
  .filter((routeItem) => routeItem.roles.includes(role)) // 根据角色过滤路由
  .map((routeItem) => {
    const key = routeItem.route;
    return {
      key,
      icon: React.createElement(routeItem.icon),
      label: routeItem.title,
    };
  });

const App: React.FC = (props) => {
  //登出与登录
  const history = useHistory();
  const handleLogout = () => {
    localStorage.clear();
    history.push('/login');
  };

  const handleMenuClick: MenuProps['onClick'] = ({ key }) => {
    console.log(key);
    history.push(key);
  };

  const getMenber = () => {
    Modal.info({
      title: '当前会员等级',
      content: (
        <div>
          <p>{localStorage.menber == null ? '管理员' : localStorage.menber}</p>
          <p>距离下一等级还差897元</p>
        </div>
      ),
      onOk() {},
    });
  };

  return (
    <Layout className="my-layout-wrapper">
      <Header className="header">
        <div className="right-tool">欢迎您</div>
        <div className="right-tool" onClick={getMenber}>
          {localStorage.menber == null ? '管理员' : localStorage.menber}
        </div>
        <div className="left-tool">
          <button onClick={handleLogout}>点击登出</button>
        </div>
      </Header>
      <Layout>
        <Sider width={200}>
          <br />
          <br />
          <Menu
            onClick={handleMenuClick}
            style={{ height: '100%', borderRight: 0 }}
            defaultOpenKeys={['sub1']}
            selectedKeys={[history.location.pathname]} //设置selectedKeys属性，刷新页面，能正确点亮当前所在页面的菜单项
            //current
            mode="inline" //inline  vertical
            // defaultSelectedKeys={['1']}
            items={items2}
          />
        </Sider>
        <Layout className="inner-layout">
          <Content className="inner-content">{props.children}</Content>
        </Layout>
      </Layout>
    </Layout>
  );
};

export default App;
